<template>
  <div class="collect-product">
    <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
      <van-list
        v-model:loading="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
      >
        <div class="card" v-for="item in list" :key="item.id">
          <header-user
            :user="item.product.user"
            :time="item.product.updateTime"
          />
          <div @click="onClickCard(item.productId)">
            <div class="title van-ellipsis">
              {{ item.product.name }}
            </div>
            <div class="imgs">
              <template v-for="img in item.product.imgList" :key="img">
                <van-image :src="img" />
              </template>
            </div>
          </div>
          <div class="btn">
            <van-button round size="small" @click="onChangeCollect(item.id)"
              >取消收藏</van-button
            >
          </div>
        </div>
      </van-list>
    </van-pull-refresh>
  </div>
</template>

<script setup lang="ts">
import {
  getCollections,
  removeCollection
} from '../../../../service/collection'
import { collectionRes } from '../../../../service/collection/types'
import HeaderUser from '../../../../components/header-user.vue'
import { Toast } from 'vant'

const emit = defineEmits<{
  (e: 'changeTotalCount', totalCount: number): void
}>()
const list = ref<collectionRes.Collection[]>([])
const loading = ref(false)
const finished = ref(false)
const totalCount = ref<number>(0)
const router = useRouter()
const refreshing = ref<boolean>(false)

const onChangeCollect = async (collectionId: number) => {
  await removeCollection(collectionId)
  for (let i = 0; i < list.value.length; i++) {
    if (list.value[i].id === collectionId) {
      list.value.splice(i, 1)
    }
  }
  emit('changeTotalCount', --totalCount.value)
  Toast('取消收藏成功~')
}
const onClickCard = (id: number) => {
  router.push(`/product/${id}`)
}
const onRefresh = () => {
  finished.value = false
  loading.value = true
  onLoad()
}
const onLoad = async () => {
  if (refreshing.value) {
    list.value = []
    refreshing.value = false
  }
  const res = await getCollections(list.value.length, 5)
  list.value?.push(...res.data.collections)
  totalCount.value = res.data.totalCount
  emit('changeTotalCount', res.data.totalCount)
  loading.value = false
  if (list.value.length >= res.data.totalCount) {
    finished.value = true
  }
}
</script>

<style lang="scss" scoped>
.collect-product {
  :deep(.van-pull-refresh) {
    height: 100%;
    .van-pull-refresh__track {
      min-height: calc(100vh - 105px);
    }
  }
  .card {
    position: relative;
    background-color: #fff;
    height: 240px;
    overflow: hidden;
    margin-top: 10px;
    border-radius: 10px;
    padding: 5px;
    .title {
      font-size: 16px;
      margin-left: 5px;
    }
    .imgs {
      display: flex;
      flex-wrap: wrap;
      .van-image {
        width: 100px;
        height: 100px;
        margin: 5px;
        margin-bottom: 500px;
        border-radius: 5px;
        overflow: hidden;
      }
    }
    .btn {
      position: absolute;
      top: 210px;
      right: 20px;
    }
  }
}
</style>
